import { Button, Form, Input, Space, PageHeader, message } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { modProject, getProject } from "../vo/request";
import { useEffect, useState } from 'react';
import { useForm } from 'antd/lib/form/Form';

export const EnvironmentSetting = () => {
    const [saveLoading, setSaveLoading] = useState(false);
    let projectId = parseInt(sessionStorage.getItem("project") as string);
    const [form] = useForm();
    useEffect(() => {
        (async () => {
            try {
                let res = await getProject(projectId);
                if(!res.code) {
                    if(res.data.header) {
                        res.data.header = JSON.parse(res.data.header);
                    }
                    if(res.data.cookie) {
                        res.data.cookie = JSON.parse(res.data.cookie);
                    }
                    form.setFieldsValue(res.data);
                }
            } catch(err:any) {
                message.error(err);
            }
        })()
    }, [])
    async function send(value: any) {
        try {
            setSaveLoading(true);
            value.header = JSON.stringify(value.header);
            value.cookie = JSON.stringify(value.cookie);
            value.projectId = projectId;
            let res = await modProject(value);
            if(!res.code) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
        } catch(err:any) {
            message.error(err)
        } finally {
            setSaveLoading(false);
        }
    }
    return (
        <div style={{ display: "flex", flexDirection: 'column', height: "100%",overflow: "auto" }}>
            <PageHeader title={<div style={{ fontSize: 30 }}>环境设置</div>} ></PageHeader>
            <Form
                form={form}
                style={{ flexGrow: 1, position: "relative" }}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                onFinish={send}
                initialValues={{ environmentDominNameHeader: "http://" }}
            >
                <Form.Item
                    name="projectPath"
                    colon={false}
                    label="baseUrl"
                >
                    <Input placeholder="http://127.0.0.1" />
                </Form.Item>

                <Form.Item
                    label=" header"
                >
                    <Form.List
                        name="header"
                    >
                        {
                            (fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, fieldKey, ...restField }) => (
                                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'key']}
                                                fieldKey={[fieldKey, 'first']}
                                            >
                                                <Input placeholder="header名称" />
                                            </Form.Item>
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'value']}
                                                fieldKey={[fieldKey, 'last']}
                                            >
                                                <Input placeholder="header内容" />
                                            </Form.Item>
                                            <MinusCircleOutlined onClick={() => remove(name)} />
                                        </Space>
                                    ))}
                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            增加条目
                                            </Button>
                                    </Form.Item>
                                </>
                            )
                        }
                    </Form.List>
                </Form.Item>

                <Form.Item
                    label="cookie"
                >
                    <Form.List
                        name="cookie"
                    >
                        {
                            (fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, fieldKey, ...restField }) => (
                                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'cookieName']}
                                                fieldKey={[fieldKey, 'first']}
                                            >
                                                <Input placeholder="cookie名称" />
                                            </Form.Item>
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'cookieContent']}
                                                fieldKey={[fieldKey, 'last']}
                                            >
                                                <Input placeholder="cookie内容" />
                                            </Form.Item>
                                            <MinusCircleOutlined onClick={() => remove(name)} />
                                        </Space>
                                    ))}
                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            增加条目
                                            </Button>
                                    </Form.Item>
                                </>
                            )
                        }
                    </Form.List>
                </Form.Item>


                <Form.Item
                    colon={false}
                    className="button"
                    label=" "
                    labelCol={{ span: 12 }}
                    wrapperCol={{ span: 10 }}
                    style={{
                        position: "sticky",
                        bottom: 0,
                        paddingBottom: 15
                    }}
                >
                    <Button loading={saveLoading} type="primary" htmlType="submit">保存</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

